<template>
  <div id="app" class="index">
    <div class="title">
      <span class="t1">【赛事报名】</span>
      <span class="t2">更多赛事报名...</span>
    </div>

    <!-- 报名列表： -->
    <div class="competitionlist">
      <ul id="events">
        <li class="bg">
          <a href="/login?param1=1"
            >2024年第十六届香港国际武术比赛<br />报名系统</a
          >
        </li>
        <li class="bg">
          <a href="/login?param1=2"
            >2024年集美区第七届中小学报名系统生武术（套路）竞标赛<br />报名系统</a
          >
        </li>
        <li class="bg">
          <a href="/login?param1=3">第十四届华夏少林武术大赛<br />报名系统</a>
        </li>
        <li class="bg">
          <a href="/login?param1=4"
            >2023年海峡两岸体育嘉年华<br />第三届客家武术大赛报名系统</a
          >
        </li>
        <li class="bg">
          <a href="/login?param1=5"
            >2024年灯都古镇第七届传统武术精英大赛<br />报名系统</a
          >
        </li>
        <li class="bg">
          <a href="/login?param1=6">第二届潇湘武林大会报名系统<br />报名系统</a>
        </li>
      </ul>
    </div>

    <div class="bottom">
      <div id="bt">
        <div class="flex-container">
          【新闻与国际交流】
          <div class="flex-item"></div>
          <div class="flex-item"></div>
          <div class="flex-item"></div>
        </div>
      </div>
      <div id="bt">
        <div class="flex-container">
          【武术名家】
          <div class="flex-item"></div>
          <div class="flex-item"></div>
          <div class="flex-item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
};
</script>

<style>
.index {
  background: #fff !important;
  height: 100%;
}
.competitionlist {
  height: 80vh;
  width: 97vw;
  border-top: 1px dashed black;
  border-left: 1px dashed black;
}

#events {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}

.bg {
  background: url("./images/bgr.jpg");
  /* box-sizing: border-box; */
  width: 48%;
  height: 120px;
  margin-top: 50px;
  list-style-type: none;
  background-size: 100% 100px;
  background-repeat: no-repeat;
}

.bg a {
  margin-top: 50px;
  transform: translateY(-50%);
  display: block;
  color: #fff;
  letter-spacing: 3px;
  text-decoration: none;
}

.title {
  margin-top: 10px;
  margin-bottom: 10px;
  /* align-items: center; */
  display: flex;
  justify-content: space-around;
  font-weight: bold;
}

.t1 {
  transform: translateX(-230%);
  letter-spacing: 2px;
}

.t2 {
  transform: translateX(150%);
}

.bottom {
  display: flex;
  justify-content: space-around;
  font-weight: bold;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-item {
  width: 30px;
  height: 8px;
  background-color: black;
  margin-right: 3px;
  transform: translateY(100%);
}

.flex-container > :last-child {
  background-color: #a40000;
}

.bottom > :first-child {
  transform: translateX(-100%);
}

.bottom > :last-child {
  transform: translateX(-190%);
}
</style>